<template>
  <div class="web-main">
    <el-row class="web-header">
      <el-col :span="16">
        <el-button type="primary" @click="addProductFun">添加产品</el-button>
      </el-col>
      <el-col :span="8" style="text-align: right">
        <el-input style="width: 180px" v-model="page.condition.type" @keyup.enter.native="search" placeholder="型号"></el-input>
        <el-button type="primary" @click="moreSearch">
          <span v-if="!searchFlag">更多</span>
          <span v-else>收起</span>
        </el-button>
      </el-col>
    </el-row>
    <el-form class="web_form web_form_min" :inline="true" :class="{'web_form_active': searchFlag }" label-width="140px" style="margin: 0 auto;overflow: hidden">
      <el-form-item label="型号">
        <el-input v-model="page.condition.type"  placeholder="型号" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="page.condition.name"  placeholder="名称" style="width: 184px"></el-input>
      </el-form-item>
      <el-form-item label="种类">
        <el-select v-model="page.condition.class" placeholder="种类"  style="width: 184px">
          <el-option v-for= "(item,index) in classList" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="page.condition.status" placeholder="状态"  style="width: 184px">
          <el-option key="1" label="停产" value="0"></el-option>
          <el-option key="2" label="正常" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="search-box">
        <el-button type="primary" :disabled='searchDisabled' @click="search">查询</el-button>
        <el-button type="primary" @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <div style="width: 100%;position: relative;">
      <el-table
        :data="tableData"
        ref="mainTable"
        header-row-class-name="table-header-center"
        border element-loading-text="正在加载中..." v-loading="false"
        @select="tableSelect"
        @row-click="rowClick"
        @selection-change="handleSelectionChange"
        style="margin: 0 4px;">
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column type="index" label="序号" ></el-table-column>
        <el-table-column prop="type" label="型号"></el-table-column>
        <el-table-column prop='name' label="名称"></el-table-column>
        <el-table-column prop='class' label="种类">
          <template slot-scope="scope">
            {{scope.row.class | productType}}
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            {{scope.row.status | productStatus}}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-pagination
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total">
    </el-pagination>

    <el-dialog
      title="添加产品"
      width="80%"
      :visible.sync="addProduct">
      <el-form class="web_form_dialog" :model="productInfo" :rules="rules" ref="ruleFormName" :inline="true" label-width="130px">
        <el-form-item label="产品型号" prop="type">
          <el-input class="w200" v-model="productInfo.type"></el-input>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input class="w200" v-model="productInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="产品种类" prop="class">
          <el-select class="w200" v-model="productInfo.class" placeholder="请选择">
            <el-option v-for="(item,key) in classList" :label="item.label" :value='item.value' :key="key"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="4">添加图片</el-col>
        <el-col :span="20">'</el-col>
      </el-row>
      <hr>
      <by-upload :qiniu_res="productInfo.imageArr"></by-upload>
      <el-row>
        <el-col :span="20">'</el-col>
        <el-col :span="4">
          <el-button type="primary" @click="confirmAdd">确认添加</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 占位 -->
    <div style="height: 50px"></div>
  </div>
</template>

<script type="text/javascript">
  import * as addProductAPI from '@/api/baseData/productionBaseData'
  import * as commonAPI from '@/api/common'
  import byUpload from '@/components/byUpload'
  export default {
    name: '',
    components: {
      byUpload
    },
    data() {
      return {
        addProduct: false,
        classList: [],
        productInfo: {
          name: '',
          type: '',
          class: '',
          imageArr: []
        },
        rules: {
          name: [
            { required: true, message: '请输入产品名称', trigger: 'change' }
          ],
          type: [
            { required: true, message: '请输入产品型号', trigger: 'change' }
          ],
          class: [
            { required: true, message: '请选择产品类型', trigger: 'change' }
          ]
        },
        selectRowCarrier: [],
        searchDisabled: false,
        searchFlag: false,
        currentRow: {},
        tableData: [],
        selectRow: '',
        page: {
          current: 1,
          size: 10,
          total: 0,
          condition: {
            type: '',
            name: '',
            status: '',
            class: ''
          }
        },
        clickRowMain: [],
        selectList: [],
        cardListMaintain: [],
        checkBox: []
      }
    },
    created() {
    },
    mounted() {
      this.getList()
      this.addBaseData()
    },
    methods: {
      getList() {
        const that = this
        addProductAPI.getList(that.page).then(res => {
          that.tableData = res.data
          that.page.current = res.page.current
          that.page.size = res.page.size
          that.page.total = res.page.total
        }).catch(err => {
          console.log('误', err)
        })
      },
      addProductFun() {
        this.addProduct = true
      },
      // 进入弹框时加载数据
      addBaseData() {
        // 加载产品种类
        commonAPI.getClass().then(res => {
          this.classList = res.data
        })
      },
      see() {
        console.log('将要操作的数据', this.productInfo)
      },
      // 确认添加
      confirmAdd() {
        const that = this
        this.$refs['ruleFormName'].validate((valid) => {
          if (valid) {
            console.log(this.productInfo)
            addProductAPI.add(this.productInfo).then(res => {
              if (res.success) {
                that.getList()
                that.addProduct = false
                this.$message({
                  message: '添加产品成功',
                  type: 'success',
                  duration: 2 * 1000
                })
              }
            })
          } else {
            this.$message({
              message: '有必填项未填！',
              type: 'error',
              duration: 2 * 1000
            })
          }
        })
      },
      // 当表格的checkbox改变时
      tableSelect(selection, row) {
        if (this.checkBox[row.id]) {
          // 清空数据
          this.checkBox[row.id] = false
          this.tableDataTractor = []
          this.tableDataTrailer = []
          this.tableDataDriver = []
        } else {
          // 请求后端数据
          this.checkBox[row.id] = true
        }
        console.log('row', row)
        this.selectRowCarrier = selection
      },
      // 表格改变时
      handleSelectionChange(val) {
        this.selectList = val
      },
      // 当点击变table行时
      rowClick(row, event, column) {
        this.clickRowMain = row
        // 标记当前选中行
        this.$refs.mainTable.clearSelection()
        this.$refs.mainTable.toggleRowSelection(row)
      },
      moreSearch() {
        this.searchFlag = !this.searchFlag
      },
      search() {
        this.getList()
      },
      resetSearch() {
        this.page.current = 1
        this.page.size = 10
        this.page.condition = {
        }
        this.getList()
      },
      handleSizeChange(val) {
        this.page.size = val
        this.page.current = 1
        this.getList()
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(val) {
        this.page.current = val
        this.getList()
        console.log(`当前页: ${val}`)
      },
      handleClose(done) {
        done()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .w200{
    width: 200px!important;
  }
  .web-main{
    box-sizing: border-box;
    padding: 0 10px;
  }
  .web-header{
    margin: 10px;
  }
  .web_form{
    transition: height 0.38s;
    height: 0;
  }
  .web_form_100{
    height: 50px !important;
  }
  .search-box{
    margin-left: 80px;
  }
  .web_form_dialog{
    margin-top: 10px;
  }
  .web_dialog_table{
    width: 100%;
    border-collapse: collapse;
    .web_dialog_table_datePicker,.web_dialog_table_status{
      width: 140px;
    }
    th,td {
      text-align: center;
      border: 1px solid #ebeef5;
      padding: 8px 2px;
    }
  }
  .el-dialog{
    height: 678px;
  }
  .sub-text{
    color: #999999;
    &:nth-child(1){
      display: inline-block;
      margin-left: 146px;
    }
  }
  .web_form_active{
    height: 44px;
  }
  @media screen and (max-width: 1600px){
    .web_form_active{
      height: 90px;
    }
  }
</style>
